import React, {useState} from "react";
import {createStyles} from "antd-style";
import {useMessageApiStore} from "@/store/BaseStore.ts";
import {Modal} from "antd";
import PhotoContainerSelector from "@/components/public/PhotoContainerSelector.tsx";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            display: flex;
            position: fixed;
            flex-direction: column;
            left: 5px;
            bottom: 5px;
            background-color: transparent;
            backdrop-filter: blur(10px) brightness(90%);

            button {
                font-size: 25px;
                padding: 10px;
                background-color: transparent;
                border: none;

                &:hover {
                    color: ${token.colorPrimary};
                }
            }
        `,
    }
})

interface Props {
    props: {
        photoContainerIndex: number
        setPhotoContainerIndex: React.Dispatch<React.SetStateAction<number>>
        photoInfo: [{
            name: string
            size: number
        }]
    }
}

const PhotoController2: React.FC<Props> = (prop) => {
    const {setPhotoContainerIndex, photoInfo, photoContainerIndex} = prop.props
    const styles = useStyles().styles
    const [showModal, setShowModal] = useState(false)

    const messageApi = useMessageApiStore(state => state.messageApi);

    const next = () => {
        if (photoContainerIndex + 1 >= photoInfo.length) {
            setPhotoContainerIndex(0)
            messageApi.info("第一页")
        } else {
            setPhotoContainerIndex(photoContainerIndex + 1)
        }
    }

    const pre = () => {
        if (photoContainerIndex - 1 < 0) {
            setPhotoContainerIndex(photoInfo.length - 1)
            messageApi.info("最后一页")
        } else {
            setPhotoContainerIndex(photoContainerIndex - 1)
        }
    }

    const randomNext = () => {
        setPhotoContainerIndex(Math.floor(Math.random() * photoInfo.length))
    }

    if (photoInfo == null) {
        return (
            <div></div>
        )
    }

    return (
        <div className={styles.container}>
            <button onClick={next}>下一页</button>
            <button onClick={pre}>上一页</button>
            <button onClick={randomNext}>随机</button>
            <button onClick={() => {setShowModal(true)}}>列表</button>
            <button onClick={() => {history.back()}}>返回</button>

            <PhotoContainerSelector props={{photoInfo, setPhotoContainerIndex, showModal, setShowModal}}/>
        </div>
    )
}

export default PhotoController2;
